<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-input
                    placeholder="请输入疾病名称"
                    prefix-icon="el-icon-search"
                    v-model="searchName">
            </el-input>
        </el-col>
        <el-col :span="6">
            <el-input
                    placeholder="请输入疾病编码"
                    prefix-icon="el-icon-search"
                    v-model="searchCode">
            </el-input>
        </el-col>
        <el-col :span="6">
            <el-select
                    v-model="value"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择编码类型"
                    :remote-method="remoteMethod"
                    :loading="loading">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="6" >
            <el-button type="primary" icon="el-icon-search" @click="getICDListByCondition">查询</el-button>
        </el-col>
    </el-row>
</template>

<script>

    export default {
        name: "SearchInput",
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                const _this = this;
                axios.get('http://127.0.0.1:8081/ICDManagement/codeQuery/'+currentPage+'/20',{
                    params:{
                        name:_this.searchName,
                        icdCode:_this.searchCode,
                        type:_this.value
                    }
                }).then(function (res) {
                    _this.currentPage=currentPage;
                    _this.total=parseInt(res.data.total);
                    _this.tableData=res.data.data;
                    let info={
                        currentPage:_this.currentPage,
                        total:_this.total,
                        tableData:_this.tableData,
                        name:_this.searchName,
                        icdCode:_this.searchCode,
                        type:_this.value
                    };
                    _this.$emit("postchildInfo",info);
                });
            },
            getICDListByCondition(){
                this.page(1);
            },
            //远程搜索
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            //获取ICD版本列表
            getIcdType(){
                const _this = this;
                axios.get('http://127.0.0.1:8081/ICDManagement/code/getVersionList').then(function (res) {
                    _this.states=res.data;
                    _this.list = _this.states.map(item => {
                        return { 'value': item.id,
                            'label': item.name
                        };
                    });
                });
            }
        },
        created() {
            this.getIcdType();
            this.account = JSON.parse(window.localStorage.getItem('access-data'));
        },
        data() {
            return {

                account:'',

                searchName:'',
                searchCode:'',
                list: [],
                loading: false,
                options: [],
                states: [],
                value:'',
                total: null,
                currentPage: 1,
                tableData: [

                ],
            }
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .ctbox{ margin:0 auto;}
</style>